<style lang="scss" scoped>
    .result-list-wrap{
        background: #EFEFEF;
        min-height: 100%;
        padding: 32px 16px;
        .title{
            font-size: 14px;
            color: $gray;
            span{
             color: #104C97;
            }
        }
        .hotel-item{
            position: relative;
            background: $white;
            border-radius: 6px;
            margin-top: 17px;
            padding-bottom: 12px;
            .content{
                padding-left: 17px;
                .name{
                    font-size: 14px;
                    margin-top: 8px;
                    margin-bottom: 2px;
                }
                .address{
                    font-size: 12px;
                    color: $gray;
                }
                .hotel-info{
                    display: flex;
                    .info{
                        margin-top: 10px;
                        margin-bottom: 10px;
                        padding-right: 18px;
                        margin-right: 18px;
                        border-right: 1px solid #E3E3E3;
                        &:last-child{
                            padding: 0;
                            margin-right: 0;
                            border: none;
                        }
                    }
                    
                    .info-title{
                        font-size: 9px;
                    }
                    .info-content{
                        font-size: 12px;
                    }
                }
            }
            .num{
                font-size: 9px;
                color: $gray;
                span{
                    color: #000000;
                }
            }
            .add{
                position: absolute;
                right: 9px;
                bottom: 13px;
                .icon{
                    width: 30px;
                    height: 30px;
                    background: url("/static/add-icon.png") 50% 50% no-repeat;
                    border: 2px solid $bgColor;
                    border-radius: 100%;
                    box-sizing: border-box;
                    margin: 0 auto;
                }
                p{
                    margin-top: 2px;
                    font-size: 8px;
                    color: $bgColor;
                }
                &.added{
                    .icon{
                        background: $bgColor url("/static/added-icon.png") 50% 50% no-repeat;
                    }
                    p{
                        color: $gray;
                    }
                }
            }
        }
        .confirm-layer {
            position: fixed;
            width: 100%;
            height: 100%;
            background: #4A4A4A;
            top: 0;
            left: 0;
            z-index: 12;
            .confirm-content {
                width: 300px;
                height: 173px;
                background: $white;
                margin: 175px auto;
                border-radius: 6px;
                text-align: center;
                overflow: hidden;
                p {
                    font-size: 14px;
                    margin: 42px 0 19px 0;
                    line-height: 22px;
                    span{
                        color: $btnColor;
                    }
                }
                .confirm-btn{
                    width: 100px;
                    height: 40px;
                    font-size: 12px;
                    color: $white;
                    background: $bgColor;
                    border-radius: 4px;
                    margin-right: 6px;
                }
                .cancel-btn{
                    width: 100px;
                    height: 40px;
                    font-size: 12px;
                    color: $white;
                    background: $gray;
                    border-radius: 4px;
                }
            }
        }
    }
</style>

<template>
    <div class="result-list-wrap">
        <p class="title">
            <span> {{ list.length }} </span>
            个搜索结果
        </p>
        <ul class="hotel-list">
            <li class="hotel-item" v-for="(item,i) in list" :key="i">
                <img :src="item.imgUrl" class="hotel-img">
                <div class="content">
                    <p class="name">{{ item.name }}</p>
                    <p class="address">{{ item.address }}</p>
                    <div class="hotel-info">
                        <div class="info">
                            <p class="info-title">最大会场面积</p>
                            <p class="info-content">{{ item.area }}㎡</p>
                        </div>
                        <div class="info">
                            <p class="info-title">会议室数量</p>
                            <p class="info-content">{{ item.meetingRoom }}</p>
                        </div>
                        <div class="info">
                            <p class="info-title">客房总数</p>
                            <p class="info-content">{{ item.room }}</p>
                        </div>
                    </div>
                    <p class="num">
                        最大会场容纳人数: <span>{{ item.num }}人</span>
                    </p>
                </div>
                <div class="add" :class="{added: item.added}" @click="addItem(item.id)">
                    <div class="icon"></div>
                    <p>加入询价</p>
                </div>
            </li>
        </ul>
        <footer-component activeItem="query" :priceNum="1"></footer-component>
        <div class="confirm-layer" v-if="showConfirm">
            <div class="confirm-content">
                <p>
                    添加
                    <span>{{ target.name }}</span> <br>
                    至方案询价列表中
                </p>
                <div class="btn-wrap">
                    <mt-button size="small" class="confirm-btn">确 认</mt-button>
                    <mt-button size="small" class="cancel-btn" @click="showConfirm = false">取 消</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import FooterComponent from '@/views/footer'
    export default {
        components: {
            FooterComponent
        },
        computed: {
        
        },
        
        filters: {},
        data() {
            return {
                showConfirm: false,
            	target: {
            		name: '上海外滩华尔道夫酒店'
                },
                list: [
                    {
                    	id: 1,
                    	name: '上海外滩华尔道夫酒店',
                        address: '上海市黄浦区中山东一路2号',
                        imgUrl: '/static/img.png',
                        area: 1155,
                        meetingRoom: 15,
                        room: 260,
                        num: 850,
                        added: false
                    },
                    {
                    	id: 2,
                        name: '上海外滩华尔道夫酒店',
                        address: '上海市黄浦区中山东一路2号',
                        imgUrl: '/static/img.png',
                        area: 1155,
                        meetingRoom: 15,
                        room: 260,
                        num: 850,
                        added: true
                    }
                ]
            };
        },
        mounted() {
        
        },
        methods: {
            addItem(id){
            
            }
        }
    };
</script>

